<template>
    <div class="module-add-modal-wrapper">
        <el-dialog :model-value="props.value" title="添加组件" :width="900" destroy-on-close>
            <DataGrid :auto-load="autoLoad" row-key="id" border @selection-change="handleSelectionChange" showSelection>
                <template #toolbar-search>
                    <div class="query-from-box">
                        <el-form>
                            <el-form-item>
                                <el-input
                                    v-model="queryData.objectName"
                                    placeholder="模型名称/标识符"
                                    clearable
                                    size="small"
                                />
                            </el-form-item>
                            <el-form-item>
                                <el-select
                                    v-model="queryData.modifierType"
                                    placeholder="模型性质"
                                    size="small"
                                    clearable
                                >
                                    <el-option
                                        v-for="(value, key) in modifierType"
                                        :label="value"
                                        :key="key"
                                        :value="key"
                                    />
                                </el-select>
                            </el-form-item>
                            <!-- <el-form-item>
                                <el-select v-model="queryData.isComponent" placeholder="用途" size="small" clearable>
                                    <el-option
                                        v-for="(value, key) in usageType"
                                        :label="value"
                                        :key="key"
                                        :value="key"
                                    />
                                </el-select>
                            </el-form-item> -->
                        </el-form>
                    </div>
                </template>
                <el-table-column prop="displayName" label="模型名称">
                    <template #default="scope">
                        <el-button link type="primary" @click="onOpenPage(scope.row)">{{
                            scope.row.displayName
                        }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="objectName" label="标识符" />
                <el-table-column label="模型性质" width="85">
                    <template #default="scope">
                        {{ modifierType[scope.row.modifierType] }}
                    </template>
                </el-table-column>
                <el-table-column label="模型用途" width="85">
                    <!-- <template #default="scope">
                        {{ usageType[scope.row.usageType] }}-{{ scope.row.isComponent ? '组件' : '产品' }}
                    </template> -->
                    <template #default="scope">
                        {{ scope.row.isComponent ? '组件' : '产品' }}
                    </template>
                </el-table-column>
                <el-table-column label="模型类型" width="85">
                    <template #default="scope">
                        {{ objectType[scope.row.objectType] }}
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="70">
                    <template #default="scope">
                        <span class="table-item-status" :status="activeState[scope.row.activeState]">
                            {{ activeState[scope.row.activeState] }}
                        </span>
                    </template>
                </el-table-column>
            </DataGrid>
            <el-form>
                <el-form-item label="模型添加数量" required style="width: 310px">
                    <el-input-number
                        v-model="modelNumber"
                        :precision="0"
                        :min="1"
                        :max="999"
                        style="width: 100%"
                        align="left"
                        controls-position="right"
                        placeholder="请输入模型添加数量"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="props.close">取消</el-button>
                    <el-button type="primary" @click="submitForm" :loading="loading">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { modifierType, objectType, activeState } from '@/utils/constant';
import { modelThingService } from '@great/services';
import type { SysMetadataObject } from '@great/services';
import { DataGrid } from '@great/components';
import { useRouter } from 'vue-router';
import type { PopupBoxProps } from '@great/utils';
import { useRequest } from 'vue-request';
import { usageType } from '@/utils/constant';

interface IProps extends PopupBoxProps {
    getList: () => Promise<void>;
    detailData: SysMetadataObject;
}
const props = defineProps<IProps>();
const router = useRouter();

const modelNumber = ref(1);

// 查询条件
const queryData = ref({
    currentObject: props.detailData?.objectName,
    objectName: null,
    modifierType: null,
    isComponent: true
});
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [queryData],
    onLoad: async (current, size) => {
        const res = await modelThingService.getAddComponents({
            current,
            size,
            ...queryData.value
        });
        return { data: res.data.records, total: res.data.total };
    }
});

// 表格勾选数据
const tableSelect = ref();
// 表格勾选
const handleSelectionChange = (val: unknown[]) => {
    tableSelect.value = val;
};

//关闭弹框
const closeDialog = () => {
    props.close();
    props.getList();
};

// 打开模型详情
const onOpenPage = (row: { id: string }) => {
    const { href } = router.resolve({
        name: 'model-thing-detail',
        query: {
            id: row?.id
        }
    });
    window.open(href, '_blank');
};

// 提交接口请求
const { run, loading } = useRequest(
    () => {
        let par: Array<Record<string, string | number>> = [];
        // 处理勾选数据
        tableSelect.value.forEach(item => {
            par.push({
                objectName: item.objectName,
                number: modelNumber.value
            });
        });
        return modelThingService.addComponent(props.detailData.objectName, par);
    },
    {
        manual: true,
        onSuccess() {
            ElNotification({
                title: '操作成功！',
                type: 'success'
            });
            closeDialog();
        }
    }
);
// 表单提交
const submitForm = () => {
    if (tableSelect.value && tableSelect.value.length) run();
};
</script>
<style scoped lang="scss">
.module-add-modal-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 192px;
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
    :deep(.data-grid) {
        margin-bottom: 20px;
        .el-table {
            height: 400px;
            .table-item-status {
                display: flex;
                align-items: center;
                &::before {
                    content: '';
                    width: 6px;
                    height: 6px;
                    display: inline-block;
                    border-radius: 50%;
                    margin-right: 5px;
                }
            }
            .table-item-status[status='未激活'] {
                &::before {
                    background-color: #909399;
                }
            }
            .table-item-status[status='激活'] {
                &::before {
                    background-color: #67c23a;
                }
            }
        }
    }
}
</style>
